<template>
	<div class="container">
		<div v-for="(v,k) in lists" :key="k">
			<view class="box">
				<view class="iceFlex">
					<view class="left">
						<view class="iceFlex">
							<span class="title">{{v.question}}</span>
							<view class="tag">{{v.typeLabel}}</view>
						</view>
						<view class="state iceFlexSt">
							<view class="point">
							</view>
							<view class="score">
								分值:{{v.score}}
							</view>
						</view>
						<view class="abcd">
							<view v-for="(vv,kk) in v.options" :key="kk">
								<view v-if="vv.options">
									{{vv.letter}}:{{vv.options}}
								</view>
							</view>
						</view>
						<view>
							<span class="gray">参考答案:</span><span class="correct">{{v.correct}}</span><span class="gray">考生答案:</span><span class="answer" :class="{red:!v.answer??true}">{{v.answer != ''?v.answer:'未做'}}</span>
						</view>
					</view>
				</view>
			</view>
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		postReadoverReadover
	} from '../../src/api/prePaper.js';
	const params = reactive({
		page: 1,
		limit: 99,
	})
	const lists = ref([])
	onLoad((options) => {
		postReadoverReadover({
			id: options.id
		}).then(res => {
			lists.value = res.data.data
		})
	})
</script>
<style lang="scss" scoped>
	.container {
		background-color: #ccc;

		.box {
			width: 90%;
			height: 60%;
			margin: 5% auto;
			background-color: #fff;
			padding: 10px;

			.title {
				width: 80%;
			}

			.left {
				width: 100%;
				.tag {
					margin-left: 1em;
					font-size: 12px;
					padding: 2px 8px;
					border-radius: 14px;
					border: 1px #f56c6c solid;
					background-color: #fde2e2;
					color: #f56c6c;
				}
				.gray{
					color:#999;
					font-size: 14px;
				}
				.answer{
					color:$uni-color-success;
					margin:0 50px 0 10px;
					font-weight:bold;
				}
				.red{
					color:$uni-color-error;
					
				}
				.correct{
					color:$uni-color-primary;
					margin:0 50px 0 10px;
				}
				.abcd {
					background-color: #ccc;
					padding: 10px;
					margin: 10px 0;
				}

				.state {
					margin-top: 8px;
					width: 166px;

					.score {
						width: 80px;
						text-align: center;
						font-size: 16px;
						color:#999;
					}

					.point {
						width: 10px;
						height: 10px;
						border-radius: 50%;
						background-color: #76ff33;
						// margin-top: 6px;
					}
				}
			}

			.right {
				padding-left: 10px;
				border-left: 1px #eee solid;
				text-align: center;

				view:nth-child(1) {
					color: #1E9FFA;
					font-weight: bold;
					font-size: 27px;
				}

				view:nth-child(2) {
					color: #B3B3B3;
				}
			}
		}
	}
</style>